<template>
     <!-- <div class='wrap' :style="{width:width+'px',height:height+'px'}"> -->
        <div class='wrap'>
        <div class="box1">
            <div class="box2">
                <div class="box3">
                    <img   class="no-drag"  :src=" src === ''?require('./canvas/默认头像.png'):src" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        src:{
            type:String,
            default:require('./canvas/默认头像.png')
        },
        width:{
            type:String,
            default:()=>'80'
        },
        height:{
            type:String,
            default:()=>'90'
        }
    }
}
</script>
<style scoped lang="scss">
     .wrap{
        width: 100%;
        height: 100%;
        .box1, .box2, .box3{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .box1{
            transform: rotate(120deg);
            // margin-left: 38px;
            // margin-top: -25px;
            
        }
        .box2{
            transform: rotate(-60deg);
        }
        .box3{
            transform: rotate(-60deg);
        }
        .box3 img {
            width: 100%;
            height: 100%;
        }
        img.no-drag {
            pointer-events: none;
            user-select: none;
            }
       
    }
  
        

</style>